<template>
	<view>
		<u-swiper :list="shopList" name="product_picture" mode='number' :autoplay='false' indicator-pos='bottomRight'
			height='650'>
		</u-swiper>
		<u-line color="orange" />
		<!--中间内容-->
		<view class="u-p-20" v-for="(item, index_1) in shopList" :key="index_1">
			<view class="u-m-b-20">
				<u-tag text="品牌好物" mode="dark" bg-color='#0eb6ff' />
				<text class="u-font-24 u-m-l-20 u-type-info-dark">原装正厂 售后无忧</text>
			</view>
			<view class="u-font-36 u-m-b-20">
				{{item.product_name}}
			</view>
			<view class="u-m-b-20">
				<text class="u-font-24 u-type-info-dark">质量有保障</text>
			</view>
			<view class="u-m-b-20">
				价格：<text class="prices u-font-36">{{item.price}}</text>元
				<text class="detail_goods">
					{{item.product_intro}}
				</text>
			</view>
			<!--评论-->
			<view class="comments">
				<view v-show="commentsList" v-for="(item,index_2) in commentsList" :key="index_2">
					<uni-card title="宝贝评价" style="margin: 5px 0px;">
						<text style="font-size: 30rpx;color: #71D5A1;">{{item.userName}}</text>
						<text style="float: right;color: #2B85E4;">{{dateFormat(item.commentTime)}}</text>
						<view>{{item.content}}</view>
					</uni-card>
				</view>
				<view v-show="!commentsList" class="no_comments">暂无评价</view>
			</view>
		</view>
		<!--底部按钮-->
		<view class="btns">
			<u-button class="go_comments" type="success" @click="showComments=true">去评论</u-button>
			<u-button class="set_cart" type="primary" @click="show=true">加入购物车</u-button>
		</view>
		<!--评论弹窗-->
		<u-popup v-model="showComments" mode="bottom" closeable>
			<view>
				<view style="margin: 5px;">
					<u-form :model="form" ref="uForm">
						<u-form-item label="评价" prop="comments">
							<u-input v-model="form.comments" type="textarea" placeholder="说出您对该商品的评价" />
						</u-form-item>
					</u-form>
				</view>
				<u-button @click="addComments" type="success">提交</u-button>
			</view>
		</u-popup>
		<!--添加购物车弹窗-->
		<u-popup v-model="show" mode='bottom' closeable>
			<view>
				<view class="u-p-30" v-for="(item, index_3) in shopList" :key="index_3">
					<view class="u-text-center u-font-30">
						{{item.product_name}}
					</view>
					<view class="u-flex u-m-b-20">
						<u-image class='u-m-r-30' width="150rpx" height="150rpx" :src="imgUrl"> </u-image>
						<view class="u-flex-col">
							<view class="u-m-b-20">
								<text class="prices">{{item.price}}</text>元/台 <text
									class="u-m-l-20 through u-type-info-dark u-font-24"></text>
							</view>
							<view class="">
								已选：{{num}}台
							</view>
						</view>
					</view>
					<view class="u-p-t-20 u-p-b-20 u-border-top">
						商家24H发货，第三方物流配送，免运费
					</view>
					<view class="u-p-t-20 u-p-b-20 u-border-top u-flex u-row-between">
						<text>购买数量(台)</text>
						<u-number-box v-model="num" :min="1" @change="valChange"></u-number-box>
					</view>
				</view>
				<button class="" type="primary" @click="shopCart()">加入购物车</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import axios from "axios";
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				commentDate: new Date().toISOString(),
				shopList: [],
				num: 1,
				show: false,
				showComments: false,
				imgUrl: "",
				price: "",
				product_id: "",
				product_name: "",
				form: {
					comments: '',
				},
				commentsList: "",
			}
		},
		onReady() {
			this.getList()
			this.getComments()
		},
		onLoad(option) {
			this.product_id = option.product_id
		},
		computed: {
			userId() {
				return this.$store.getters.getId;
			}
		},
		methods: {
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			},
			addComments() {
				uni.request({
					url: "/api/comments/insertComments",
					data: {
						content: this.form.comments,
						product_id: this.product_id,
						userId: this.userId,
						commentTime: this.dateFormat(this.commentDate)
					},
					method: "POST",
					success: (res) => {
						uni.showToast({
							title: '评论成功',
							icon: 'success'
						})
						this.showComments = false;
						this.form.comments = "";
						this.getComments();
					}
				})
			},
			getComments() {
				uni.request({
					url: "/api/comments/selComments",
					data: {
						product_id: this.product_id,
						userId: this.userId
					},
					method: "POST",
					success: (res) => {
						if (res.data.length) {
							this.commentsList = res.data
						}

					}
				})
			},
			getList() {
				const url = 'http://localhost:3001/'
				var _this = this
				axios.get('/api/shop/shopDetail', {
					params: {
						product_id: this.product_id
					}
				}).then(function(res) {
					let arr = res.data
					if (Array.isArray(arr)) {
						arr.forEach(item => {
							item.product_picture = `${url}${item.product_picture}`
						})
						_this.shopList = arr
					}
					_this.imgUrl = res.data[0].product_picture //图片路径
					_this.product_name = res.data[0].product_name
					_this.price = res.data[0].price
				}).catch(function(err) {
					console.log(err)
				})
			},
			shopCart() {
				var _this = this
				axios.post('/api/shop/shopCart', {
					product_name: this.product_name,
					num: this.num,
					price: this.price,
					product_id: this.product_id,
					image: this.imgUrl,
					userId: this.userId
				}).then(function(res) {
					_this.show = false
					uni.showModal({
						title: '加入成功',
						content: '是否查看购物车？',
						cancelText: "取消", // 取消按钮的文字  
						confirmText: "确认", // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#39B54A',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: "../shopcart/shopcart"
								})
							} else {

							}
						}
					})
				}).catch(function(err) {
					console.log(err)
				})
			},
			valChange(e) {
				this.num = e.value
			}
		}
	}
</script>

<style scoped>
	.prices {
		color: red;
	}

	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.go_comments,
	.set_cart {
		width: 50%;
		display: inline-block;
	}

	.line-through {
		text-decoration: line-through
	}

	.detail_goods {
		font-weight: bold;
		display: block;
		margin-top: 5px;
	}

	.no_comments {
		padding-top: 10px;
		text-align: center;
		font-size: 20px;
		color: #DBF1E1;
	}
</style>
